<template>
  <div class="good" v-if="goodsdetail[0]">

    <div class="goods">
      <div class="left" @click="goblock"><i class="el-icon-back"></i></div>
      <div class="leftimg">
        <img :src="goodsdetail[0].image_url" alt="">
      </div>
      <div class="rightinfo">
        <h3>{{goodsdetail[0].goods_name}}</h3>
        <div class="containinfo">
          <dl>
            <dt>
              促销价：
            </dt>
            <div>
              <span>￥{{(goodsdetail[0].price/100).toFixed(2)}} <b>优惠促销</b></span>
            </div>
          </dl>
          <dl>
            <dt>市场价:</dt>
            <dd>￥{{(goodsdetail[0].normal_price/100).toFixed(2)}}</dd>
          </dl>
          <dl>
            <dt>本店优惠</dt>
            <dd>包邮</dd>
          </dl>
          <dl>
            <dt>已售{{goodsdetail[0].sales_tip}}万+</dt>
          </dl>
          <dl>
            <dt>本店承诺</dt>
            <dd>正品保证,7天无理由,送运费险</dd>
          </dl>
        </div>
        <dl>
          <dt>运费：</dt>
          <dd>湖北武汉 至 湖北恩施 快递:0.00 </dd>
          <dd> 库存：{{goodsdetail[0].counts}}</dd>
        </dl>
        <dl>
          <dt>数量:</dt>
          <el-input-number v-model="num" :step="1" class="input" :min="1" :max="goodsdetail[0].counts"></el-input-number>
        </dl>
        <dl>
          <el-button type="danger" @click="gocart(goodsdetail[0])">加入购物车</el-button>
        </dl>
      </div>

    </div>
    <div class="footinfo">
      <h3>商品评价</h3>
      <div class="user" v-if="goodsdetail[0].comments_count">
        <div class="commentbox" v-for="(comment,index) in goodscomment" :key="index">
          <h5>用户:<span>{{comment.user_name.replace(/^(\d{3})\d{4}(\d{4})/,'$1****$2')}}</span></h5>
          <div class="comment">评论:{{comment.comment_detail}}<span><el-rate v-model="comment.comment_rating" show-text></el-rate></span>
          </div>

        </div>

      </div>

      <div class="bottominfo">
        <div v-if="userinfo.id">
          <h4>评论该商品</h4>
          <el-rate v-model="rating" show-text text-color="#ff9900">

          </el-rate>
          <el-input type="textarea" size="medium" autosize placeholder="请输入内容" v-model="text">
          </el-input>
          <el-button type="primary" class="release" @click=" releaseinfo()"><i class="el-icon-edit el-icon--right"></i>发布</el-button>

        </diV>
        <div v-else>
          <h4>评论该商品</h4>
          <h4>登录后才可以评论</h4>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { postcomment, addcart } from '@/api/index.js'
export default {
  data() {
    return {
      value: 1,
      num: 1,
      currentid: 0,
      text: '',
      rating: 0 //发布评论的星星
    }
  },
  methods: {
    //返回
    goblock() {
      this.$router.push('/home')
    },
    //发布评论
    async releaseinfo() {
      if (!this.text) {
        this.$message({
          title: '提示',
          message: '评论不能为空'
        }).catch(err => {})
        return
      }
      let res = await postcomment(this.goodsdetail[0].goods_id, this.text, this.rating, this.userinfo.id)
      if (res.data.code == 200) {
        this.$message({
          type: 'success',
          message: '发布成功'
        })
        this.text = ''
        this.$store.dispatch('goods/goodcomment', { id: this.currentid })
      } else {
        this.$message({
          type: 'info',
          message: '发布失败'
        })
      }
    },
    async gocart(goods) {
      if (this.userinfo.id) {
        let result = await addcart(this.userinfo.id, goods.goods_id, goods.short_name, goods.thumb_url, goods.price, this.num, goods.counts)
        if (result.data.code == 200) {
          this.$message({
            type: 'success',
            message: result.data.msg
          })
        }
        let user_id = this.userinfo.id
        this.$store.dispatch('cart/cartlist', { user_id })
        this.num = 1
      }
    }
  },
  created() {
    //j进入页面存商品id
    this.currentid = Number(this.$route.params.id)
    this.$store.dispatch('goods/goodsdetail', { id: this.currentid })
    this.$store.dispatch('goods/goodcomment', { id: this.currentid })
  },
  computed: {
    ...mapState('goods', ['goodsdetail', 'goodscomment']),
    ...mapGetters(['userinfo'])
  },
  watch: {
    $route() {
      this.currentid = Number(this.$route.params.id)
      this.$store.dispatch('goods/goodsdetail', { id: this.currentid })
      this.$store.dispatch('goods/goodcomment', { id: this.currentid })
      this.$store.dispatch('getuserinfo')
    }
  }
}
</script>

<style scoped lang='less'>
.good {
  .goods {
    position: relative;
    .left {
      position: absolute;
      left: 20px;
      top: 50px;
      i {
        float: left;
        border: 1px solid gray;
        height: 30px;
        width: 30px;
        text-align: center;
        line-height: 30px;
      }
    }
    display: flex;
    .leftimg {
      border: 1px solid #f7f7f7;
      margin: 50px 0;
      margin-left: 20%;
      height: 400px;
      width: 450px;
      background: #f7f7f7;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        height: 100%;
        width: 100%;
      }
    }
    .rightinfo {
      margin: 50px 20px;
      h3 {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 400px;
        background: #f7f7f7;
      }
      dl {
        margin-top: 15px;
        display: flex;
        .input {
          margin-top: -10px;
          margin-left: 15px;
          vertical-align: middle;
        }
      }
    }
    .containinfo {
      margin-top: 35px;
      height: 200px;
      width: 400px;
      background: #f7f7f7;

      dl {
        margin-top: 20px;
        display: flex;
      }
    }
  }
  .footinfo {
    width: 65%;
    margin-left: 18%;
    border: 1px solid black;

    h3 {
      border-bottom: 1px dashed black;
      margin: 5px 10px;
      padding-bottom: 10px;
    }
    .user {
      margin: 5px 10px;
      .commentbox {
        border-bottom: 1px solid black;
        .comment {
          line-height: 20px;
          display: flex;
          vertical-align: middle;

          span {
            margin-left: 20px;
          }
        }
      }
    }

    .bottominfo {
      border-top: 1px solid black;
      margin-top: 20px;
      padding-left: 15px;
      .release {
        margin: 5px 0;
      }
    }
  }
  .el-input.is-active .el-input__inner,
  .el-input__inner:focus {
    border: 0;
  }
}
</style>